<template>
 <div class="header">
     <!-- 内容区 -->
     <div class="content-wrapper">
         <!-- 左边头像 -->
         <div class="avatar">
             <img width="64" height="64" :src="seller.avatar" alt="">
         </div>
         <!-- 右边内容 -->
         <div class="content">
            <!-- 标题 -->
             <div class="title">
                 <span class="brand"></span>
                 <span class="name">{{seller.name}}</span>
             </div>
             <!-- 描述和时间 -->
             <div class="description">
                 {{seller.description}}/{{seller.deliveryTime}}分钟送达
             </div>
             <!-- 公告 初始化传递时seller是一个空的对象，所以判断一下如果为空则不显示取不到值-->
             <div v-if="seller.supports" class="support">
                <!-- 图标 -->
                <span class="icon"></span>
                <!-- 公告内容 -->
                <span class="text">{{seller.supports[0].description}}</span>
             </div>
         </div>
     </div>
     <!-- 公告区-->
     <div class="bulletin-wrapper"></div>
 </div>
</template>

<script type="text/ecmascript-6">
    export default{
        // 通过props接受传递的数据seller
        props: {
            seller: {
                type: Object
            }
        }
    };
</script>

<style rel="stylesheet/stylus"  lang="stylus">
    @import '../../common/stylus/mixin.styl'
    .header
        color #fff
        background  #000
        .content-wrapper
            padding 24px 12px 18px 24px
            .avatar
                display inline-block
                vertical-align top
                img 
                    border-radius 2px
            .content
                display inline-block    
                font-size 14px
                margin-left 12px
                .title
                    margin 2px 0 8px 0
                    .brand
                        display inline-block
                        vertical-align top
                        width 30px
                        height 18px
                        //接受传递过来的方法的函数
                        bg-image('brand')
                        background-size 30px 18px
                        background-repeat no-repeat
                    .name
                        margin-left 6px
                        font-size 16px
                        line-height 18px
                        font-weight bold
                .description
                    margin-bottom 10px
                    line-height 12px
                    font-size 12px  
                .support
                    .icon
                        display inline-block
                        width 12px
                        height 12px
                        margin-right 4px
                        background-size 12px 12px
                        background-repeat no-repeat
</style>
